
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本差异对比工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --accent: #fd79a8;
            --dark: #2d3436;
            --light: #f5f6fa;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.2);
            flex-wrap: wrap;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        button:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }
        
        .text-areas {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        
        .text-container {
            flex: 1;
            min-width: 300px;
        }
        
        .text-container h3 {
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        textarea {
            width: 100%;
            height: 300px;
            padding: 15px;
            border: 2px solid #eee;
            border-radius: 10px;
            resize: vertical;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .result {
            padding: 20px;
            margin: 20px;
            border-radius: 10px;
            background: #f8f9fa;
            min-height: 200px;
            line-height: 1.6;
        }
        
        .diff-result {
            white-space: pre-wrap;
            font-size: 16px;
        }
        
        .added {
            background-color: #d4edda;
            text-decoration: underline;
        }
        
        .removed {
            background-color: #f8d7da;
            text-decoration: line-through;
        }
        
        .changed {
            background-color: #fff3cd;
        }
        
        @media (max-width: 768px) {
            .text-areas {
                flex-direction: column;
            }
            
            textarea {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-file-alt"></i> 文本差异对比工具</h1>
            <p>对比两个文本片段，高亮显示新增、删除和修改的内容</p>
        </header>
        
        <div class="controls">
            <button id="compare-btn"><i class="fas fa-exchange-alt"></i> 对比文本</button>
            <button id="clear-btn"><i class="fas fa-trash"></i> 清空内容</button>
            <button id="example-btn"><i class="fas fa-lightbulb"></i> 加载示例</button>
        </div>
        
        <div class="text-areas">
            <div class="text-container">
                <h3>原始文本</h3>
                <textarea id="original-text" placeholder="在此输入原始文本..."></textarea>
            </div>
            <div class="text-container">
                <h3>修改文本</h3>
                <textarea id="modified-text" placeholder="在此输入修改后的文本..."></textarea>
            </div>
        </div>
        
        <div class="result">
            <h3>对比结果</h3>
            <div id="diff-result" class="diff-result">对比结果将显示在这里...</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const originalTextarea = document.getElementById('original-text');
            const modifiedTextarea = document.getElementById('modified-text');
            const diffResult = document.getElementById('diff-result');
            const compareBtn = document.getElementById('compare-btn');
            const clearBtn = document.getElementById('clear-btn');
            const exampleBtn = document.getElementById('example-btn');
            
            // 对比文本
            compareBtn.addEventListener('click', function() {
                const originalText = originalTextarea.value;
                const modifiedText = modifiedTextarea.value;
                
                if (!originalText && !modifiedText) {
                    diffResult.innerHTML = '请先输入要对比的文本';
                    return;
                }
                
                const diff = diffText(originalText, modifiedText);
                diffResult.innerHTML = diff;
            });
            
            // 清空内容
            clearBtn.addEventListener('click', function() {
                originalTextarea.value = '';
                modifiedTextarea.value = '';
                diffResult.innerHTML = '对比结果将显示在这里...';
            });
            
            // 加载示例
            exampleBtn.addEventListener('click', function() {
                originalTextarea.value = `尊敬的客户：

感谢您选择我们的服务。根据我们的记录，您的账户余额为1000元。我们希望您能继续享受我们的优质服务。

如有任何问题，请随时联系我们的客服团队。

此致
敬礼`;
                
                modifiedTextarea.value = `尊敬的客户：

感谢您选择我们的服务。根据我们的记录，您的账户余额为1200元（已更新）。我们希望您能继续享受我们全新升级的优质服务。

如有任何问题，请随时联系我们的24小时客服团队。

此致
敬礼`;
            });
            
            // 文本差异对比算法
            function diffText(original, modified) {
                if (original === modified) {
                    return original;
                }
                
                const originalLines = original.split('\n');
                const modifiedLines = modified.split('\n');
                let result = '';
                
                // 简单的逐行对比算法
                for (let i = 0; i < Math.max(originalLines.length, modifiedLines.length); i++) {
                    const originalLine = originalLines[i] || '';
                    const modifiedLine = modifiedLines[i] || '';
                    
                    if (originalLine === modifiedLine) {
                        result += originalLine + '\n';
                    } else {
                        if (originalLine && !modifiedLine) {
                            result += `<span class="removed">${originalLine}</span>\n`;
                        } else if (!originalLine && modifiedLine) {
                            result += `<span class="added">${modifiedLine}</span>\n`;
                        } else {
                            // 逐字符对比
                            result += diffLines(originalLine, modifiedLine) + '\n';
                        }
                    }
                }
                
                return result;
            }
            
            // 行内差异对比
            function diffLines(original, modified) {
                if (original === modified) {
                    return original;
                }
                
                let result = '';
                let i = 0;
                
                while (i < original.length && i < modified.length && original[i] === modified[i]) {
                    result += original[i];
                    i++;
                }
                
                const originalRemaining = original.slice(i);
                const modifiedRemaining = modified.slice(i);
                
                if (originalRemaining && modifiedRemaining) {
                    result += `<span class="changed">${originalRemaining}</span>`;
                } else if (originalRemaining) {
                    result += `<span class="removed">${originalRemaining}</span>`;
                } else if (modifiedRemaining) {
                    result += `<span class="added">${modifiedRemaining}</span>`;
                }
                
                return result;
            }
        });
    </script>
</body>
</html>
